import React, { Component } from 'react'
import request from '../../../api/api'
export default class Good extends Component {
    state = {
        videolist: []
    }
    getVideo = () => {
        request({
            url:'/api/maoyan/video/4',
            method:'get'
        }).then(res => {
            res.data.feeds.forEach(element => {
                element.flag = false
            });
            this.setState({
                videolist: [...res.data.feeds]
            })
        })
    }
    play=(index)=>{
        this.setState(state=>{
            state.videolist[index].flag=true
            return {videolist:[...state.videolist]}
        })

    }
    componentDidMount() {
        this.getVideo()
    }
    render() {
        let { videolist } = this.state
        return (
            <>
                <div className="neiR_box">
                    {
                        videolist.map((item,index) => {
                            return (
                                <div className="shop_box" key={item.id}>
                                    {!item.flag && (<div className="tu">
                                        <img
                                            src={item.shareInfo.img}
                                            alt=""
                                        />
                                        <div className="tu_tin" onClick={()=>this.play(index)}>
                                            <img src={require("../../../assets/video-btn-play.png")} alt="" />
                                        </div>
                                        <span>{item.shareInfo.title}</span>
                                    </div>)}
                                    {item.flag && (<div className="xiang_qing">
                                        <video width="100%" height="210" controls="controls" autoPlay>
                                            <source src={item.video.url} type="video/mp4" />
                                        </video>
                                    </div>)}
                                    <div className="xiXi">
                                        <div className="geR_left">
                                            <img
                                                src={item.user.avatarurl}
                                                alt=""
                                            /><span>{item.user.nickName}</span>
                                        </div>
                                        <div className="gneng_right">
                                            <span className="dianZai">{item.upCount}</span>
                                            <span className="pingLun">{item.commentCount}</span>
                                            <span className="fenXian"></span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </>
        )
    }
}
